<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
  <script src="js/axios.min.js"></script>
  <script src="js/vue.min.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="ele-2.15.7/index.js"></script>
</head>

<style>

  .box-card {
    width: 100%;
    height: 200px;
    margin: auto;
    margin-top:30px ;
  }

  .container-filter{
    height: 140px;
  }

  .operate-container{
    height: 60px;
    margin-bottom:20px;
  }

  .btn-add{
    font-size: 14px;
    float: right;
  }
  .el-card__body{
    padding: 20px;
  }


  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>

<body>
<div id="app">
  <div class="main-container">

    <div class="el-card box-card container-filter" >
      <div class="el-card__body container-filter-body">
        <div>
          <div class="search-top">
            <i class="el-icon-search"></i>
            <span> 筛选搜索</span>
            <el-button style="float: right;font-size: 12px" class="el-button--primary" @click="query(1)">查询结果</el-button>
            <el-button style="float: right;font-size: 12px; margin-right: 15px" @click="resetInput">重置</el-button>
          </div>
          </button>
        </div>
      </div>
      <div style="margin-top: 15px;">
        <el-form :inline="true" class="demo-form-inline" style="margin-left: 25px">
          <el-form-item label="输入搜索:">
            <el-input v-model="uname" placeholder="姓名/账号"></el-input>
          </el-form-item>
          <el-form-item label="用户状态:">
            <el-select v-model="status" placeholder="全部">
              <el-option
                      v-for="item in statusOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <el-card class="box-card operate-container " shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" @click="create" >
        <span>添加</span>
      </el-button>

    </el-card>


    <div class="table-container box-card">
      <el-table border :data="tableData.data" style="width: 100%" :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <el-table-column fixed prop="uid" label="用户编号" width="150"></el-table-column>

        <el-table-column prop="image" label="图片">
          <template slot-scope="scope">
            <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.image"
                    fit="contiain">
            </el-image>
          </template>
        </el-table-column>

        <el-table-column prop="uname" label="用户名称" ></el-table-column>
        <el-table-column prop="phone" label="注册手机号" ></el-table-column>
        <el-table-column prop="sex" label="性别" width="150"></el-table-column>
        <el-table-column prop="email" label="电子邮箱" ></el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-switch
                    v-model="scope.row.status"
                    inactive-text="封禁:"
                    active-color="#409EFF"
                    inactive-color="#ff4949"
                    :active-value="UserActive"
                    :inactive-value="UserInactive"
                    @change="changeStatus(scope.row)"
                    inactive-color = "red">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button  size="mini" @click="modify(scope.row)">编辑</el-button>
            <el-button  size="mini" type="danger" @click="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-footer style="text-align: right">
        <el-pagination :page-size="pageSize" @current-change="query" @size-change="sizeChange"
                       background :page-sizes="[10,15,20]"
                       layout="total,sizes,prev,pager,next,jumper"
                       :total="tableData.total"
                       :current-page.sync="tableData.page">
        </el-pagination>
      </el-footer>
    </div>
  </div>

  <el-dialog style="width:1300px;"  title="用户编辑" :visible.sync="dialogFormVisible" :close-on-click-modal = "false">
    <div style="display: flex; justify-content: space-around;">
      <el-form>
        <el-form-item label="用户名称" :label-width="formLabelWidth">
          <el-input v-model="UserData.uname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="UserData.pwd" autocomplete="off" type="password"></el-input>
        </el-form-item>

        <el-form-item label="电子邮箱" :label-width="formLabelWidth">
          <el-input v-model="UserData.email" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="注册手机号" :label-width="formLabelWidth">
          <el-input v-model="UserData.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="UserData.sex" placeholder="请选择">
            <el-option
                    v-for="item in sexs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>


      <!--        图片上传-->
      <!--        这里的name是为了将文件上传默认file改成我们设置的image-->
      <el-upload
              name = "image"
              class="avatar-uploader"
              action="UploadImageServlet.s"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
        <img v-if="UserData.image" :src="UserData.image" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveUser">确 定</el-button>
    </div>

  </el-dialog>
</div>
<script>
  var v = new Vue({
    el: "#app",
    data: {
      status: "",
      uname: "",
      pageSize: 10,
      UserActive : "1",
      UserInactive : "0",
      statusOption: [{
        label: "正常",
        value: 1
      }, {
        label: "封禁状态",
        value: 0
      }],
      sexs: [{
        label: "男",
        value: "男"
      }, {
        label: "女",
        value: "女"
      }],
      formLabelWidth: "100px",
      //表格数据
      tableData: {page: 1},
      // 弹框开关
      dialogFormVisible: false,
      // 弹框数据
      UserData: {uid: "", uname: "", pwd: "", phone: "", sex: "", email: "", status: "",image : ""},
    },
    created() {
      this.query(1);
    },
    methods: {
      query(page) {
        axios.get("UserListServlet.s", {
          params: {
            uname: this.uname,
            status: this.status,
            currentPage: page, //当前页数
            pageSize: this.pageSize //每页显示条目个数
          }
        }).then(res => {
          this.tableData = res.data;
          this.tableData.page = page;

        })
      },

      sizeChange(page) {
        this.pageSize = page;
        this.query(1);
      },
      create() {
        this.UserData = {uid: "", uname: "", pwd: "", phone: "", sex: "", email: "", status: "",image : ""};
        this.dialogFormVisible = true;
      },
      // 图片上传组件
      // 上传之后
      handleAvatarSuccess(res, file) {
        // res 是后台返回的结果， 不过，此res != axios.res
        // res ==> axios.res.data
        // res.data ==> webpath
        // 注意 / 前面所代表的前缀
        // res.data.substring(1); 也可
        this.UserData.image = "."+res.data;
        this.$forceUpdate();
      },
      // 上传之前
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/') > -1;
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 图片 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      // 修改
      modify(data) {
        this.create();
        for (let i in data) {
          this.UserData[i] = data[i];
        }
        this.dialogFormVisible = true;
      },


      // 添加
      saveUser() {
        // 构建post参数
        var params = new URLSearchParams();

        for (let name in this.UserData) {
          params.append(name, this.UserData[name]);
        }

        // 发送 ajax post 请求
        axios.post("SaveUserServlet.s", params).then(res => {
          if (res.data.code == 1) {
            this.$message(res.data.msg);
            this.query(1); // 刷新表格
            this.dialogFormVisible = false; // 关闭弹窗
          } else {
            this.$alert(res.data.msg);
          }
        })
      },
      resetInput() {
        this.uname = "";
        this.status = "";
      },
      //物理删除
      remove(data){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          type: 'warning'
        }).then(() => {
          axios.get("RemoveUserServlet.s",{
            params: {
              uid : data.uid,
              flag : "物理删除"
            }
          }).then(()=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.query(1);
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //逻辑删除
      changeStatus(data){
        axios.get("RemoveUserServlet.s",{
          params : {
            uid : data.uid,
            flag : "逻辑删除",
            status : data.status
          }
        }).then(res=>{
          this.$message(res.data.msg);
        })
      }
    },

  })
</script>
</body>
</html>